<link rel="stylesheet" href="__PUBLIC__/yksui/css/multi-select.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="wrapper">
        <div class="panel" id="nav">
            <div class="panel-heading"><h3 class="panel-title">销售员账号对应关系表</h3></div>
            <div class="panel-body">
                <form action="__URL__/index" method="get">
                    <div class="container-fluid">
                        <div class="col-sm-12 col-md-3 add-space">
                            <div class="input-group input-group-md">
                                <span class="input-group-addon">账号</span>
                                <select class="chosen-select form-control" tabindex="-1" name="account_id"
                                        data-name-group="common">
                                    <option value="" class="empty-opt">-- 请选择 --</option>
                                    <volist name="accounts" id="acc">
                                        <option value="{$acc.id}">{$acc.name}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-12 col-md-3 add-space">
                        <div class="input-group input-group-md">
                            <span class="input-group-addon">销售员</span>
                            <select class="chosen-select form-control" tabindex="-1" name="seller_ids"
                                    data-name-group="common">
                                <option value="" class="empty-opt">-- 请选择 --</option>
                                <volist name="remark" id="sel">
                                    <option value="{$Think.lang.$key}">{$sel}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 add-space">
                        <input class="btn btn-primary" type="submit" value="搜索">
                    </div>
                </form>
            </div>

            <div class="clearfix"></div>
            <hr>
            <div class="fixed-table-toolbar">
                <h3>
                    <button type="button" class="btn btn-success " data-toggle="modal" data-target=".addRelation">+ 新增对应
                        关系</button>
                </h3>
            </div>
            <table class="table table-striped  table-hover" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th width="40">序号</th>
                    <th>账号</th>
                    <th>销售员</th>
                    <th>最后一次操作时间</th>
                    <th>最后一次操作人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <volist name="data" id="vo" key="num">
                    <tr>
                        <td>{$num}</td>
                        <td>{$vo.account_name}</td>
                        <td>{$vo.seller_names}</td>
                        <td>{$vo.update_time}</td>
                        <td>{$vo.user_id}</td>
                        <td><input type="hidden" name="ids" value="{$vo.seller_ids}">
                            <button type="button" class="btn btn-danger btn-sm add-space"  onclick="update('{$vo.id}','{$vo.account_id}','{$vo.account_name}','{$vo.seller_ids}','{$vo.seller_names}')">解绑</button>

                        </td>
                    </tr>
                </volist>
                </tbody>
            </table>
            <div class="clearfix clear"></div>
            <div class="col-md-6 pull-left">
                <label>每页 20 条记录
                    显示 1 到 20 项，共 {$count}项</label>
            </div>
            <div class="col-md-6">
                <div class="page pull-right" style="padding: 0;margin: 0">
                    {$page}
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<!-- 新增 -->
<div class="modal fade addRelation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="__URL__/addAccountSeller" method="post" class="form-inline">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增销售员账号对应关系</h4>
            </div>
            <div class="modal-body">
                    <div class="col-sm-12 col-md-6 col-md-offset-2 add-space">
                        <div class="input-group input-group-md">
                            <span class="input-group-addon">账号</span>
                            <select class="form-control chosen-select" tabindex="-1" name="account_id"
                                    data-name-group="common">
                                <option value="" class="empty-opt">-- 请选择 --</option>
                                <volist name="accounts" id="acc">
                                    <option value="{$acc.id}">{$acc.name}</option>
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="form-group add-space col-md-offset-2">
                        <!--<div class="input-group add-space col-md-5">-->
                            <!--<input type="text" class="form-control search_sell" placeholder="模糊搜索销售员名称">-->
                            <!--<div class="input-group-addon btn-success" onclick="search_ip('seller')">搜索</div>-->
                        <!--</div>-->
                        <select multiple='multiple' class="searchable c" name="seller_id[]">
                            <volist name="remark" id="sel">
                                    <option value="{$key}">{$sel}</option>
                            </volist>
                        </select>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!--解绑-->

<script type="text/javascript" src="__PUBLIC__/yksui/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="__PUBLIC__/javascripts/admin/layer/layer.js"></script>
<script type="text/javascript">
    $('.searchable').multiSelect({
        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='请输入搜索名字'>",
        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='请输入搜索名字'>",
        afterInit: function(ms){
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function(e){
                    if (e.which === 40){
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function(e){
                    if (e.which == 40){
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();
        }
    });
</script>
<script type="text/javascript">
    $(function () {
        $("select[name='account_id']").val("<?php  echo $_GET['account_id'];?>");
        $("select[name='seller_ids']").val("<?php  echo $_GET['seller_ids'];?>");
        $('select.chosen-select').chosen({
            no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
            disable_search_threshold: 2, // 10 个以下的选择项则不显示检索框
            search_contains: true         // 从任意位置开始检索
        });
        $('.chosen-container-single').css('width','200px');
    });
    function update(id) {
        var url="{:U('AccountSeller/delAccountSeller')}?id="+id;
        layer.open({
            type: 2,
            title: '解绑销售员账号对应关系',
            shadeClose: false,
            shade: 0.8,
            area: ['40%', '60%'],
            content: url
        });

    }

</script>